<template>
  <el-container>
    <el-header style="background-color:white">
      <el-row :gutter="20">
        <el-col :span="4"
                style="width:auto;">
          <span>分类</span>
          <el-select v-model="selectValue"
                     placeholder="请选择分类"
                     style="margin-left:20px;width: 180px;">
            <el-option v-for="item in categoryList"
                       :key="item.id"
                       :label="item.categoryname"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>试卷名称</span>
          <el-input v-model="inputname"
                    placeholder="请输入试卷名称"></el-input>
        </el-col>
        <el-col :span="6">
          <span>创建人</span>
          <el-input v-model="inputCreater"
                    placeholder="请输入创建人"></el-input>
        </el-col>
        <el-col :span="6">
          <span>考试时长</span>
          <el-input v-model="inputTime"
                    placeholder="请输入考试时长"></el-input>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="500px"
                style="height:400px position:fixed;background-color:white">
        <div style="text-align: center">
          <el-transfer style="text-align: left; display: inline-block"
                       v-model="value"
                       right-footer
                       :render-content="renderFunc"
                       :titles="['题目', '试卷']"
                       :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
                       @change="handleChange"
                       :data="data">
          </el-transfer>
        </div>
        <el-col :span="4">
          <el-button type="primary"
                     style="position:fixed;top: 522px;left: 600px;"
                     @click="createTopic">生成试卷</el-button>
        </el-col>
      </el-aside>
      <el-main style="height:1000px;background-color:white">
        <el-row v-for="(item,i) in titleList"
                :key="i">
          <el-col :span="24">
            <div class="grid-content">
              {{i+1}} {{item.title}} {{item.answer}}
            </div>
            <div class="grid-content">
              A.{{item.optionA}}
            </div>
            <div class="grid-content">
              B.{{item.optionB}}
            </div>
            <div class="grid-content">
              C.{{item.optionC}}
            </div>
            <div class="grid-content">
              D.{{item.optionD}}
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
    name: 'CreateTest',
    inject:['refresh'],
    data() {
        return {
            inputname: '',
            inputCreater: '',
            selectValue: '',
            inputTime: '',
            titleList: [],
            wait_choose_titles: [],
            data: [],
            value: [],
            value4: [],
            categoryList: [],
            renderFunc(h, option) {
                return <span>{option.label}</span>;
            },
            topic: {}
        };
    },
    created() {
        this.findCategory();
        this.findTitle();
    },
    watch:{
      selectValue(){
        this.data=[];
        this.findTitle(this.selectValue);
      }
    },
    methods: {
        findCategory() {
            this.$axios
                .post('/api/category/findCategory/',{})
                .then((res) => {
                    this.categoryList = res.data.data;
                })
                .catch();
        },
        handleChange(value) {
            this.titleList = [];
            for (let i = 0; i < value.length; i++) {
                this.titleList.push(this.wait_choose_titles[value[i]]);
            }
        },
        createTopic() {
            this.topic.name = this.inputname;
            this.topic.creatername = this.inputCreater;
            this.topic.time = this.inputTime;
            this.topic.categoryid = 1;
            this.topic.categoryid = this.selectValue;
            let jsonTopic = JSON.stringify(this.titleList);
            this.topic.content = jsonTopic;
            this.$axios
                .post('/api/topic/createTopic', this.topic)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('创建成功！');
                        this.refresh();
                    }
                })
                .catch();
        },
        findTitle(data) {
            this.$axios
                .post('/api/title/findTitle/1/100', {categoryid:this.selectValue})
                .then((res) => {
                    this.wait_choose_titles = res.data.data.list;
                    for (let i = 0; i < this.wait_choose_titles.length; i++) {
                        this.data.push({
                            key: i,
                            label: this.wait_choose_titles[i].title
                        });
                    }
                })
                .catch();
        }
    }
};
</script>
<style scoped>
.el-input {
    margin-left: 20px;
    width: 180px;
}
.grid-content[data-v-6a1fdb24] {
    height: 50px;
    line-height: 50px !important;
    text-align: left;
}
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}

.el-header,
.el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
}
.bg-purple {
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>